<template>
  <div class="Day">
    <div>
      <h1>18</h1>
      <h4>今日参加活动人次</h4>
      <p>
        <img
          src="../../../assets/img/main/1/main-beijing-18-jianbiantiao.png"
          alt=""
        />
        <!-- <img src="../../../assets/img/main/1/main-beijing-18-jianbiankuai1.png" alt=""> -->
      </p>
    </div>
    <div>
        <h1>￥2330.00</h1>
        <h4>今日活动收入</h4>
        <p>
            <img
          src="../../../assets/img/main/2/main-beijing-18-jianbiantiao2.png"
          alt=""
        />
        </p>
    </div>
    <div>
        <h1>18</h1>
        <h4>今日课程订单数</h4>
        <p><img
          src="../../../assets/img/main/3/main-beijing-18-jianbiankuai2.png"
          alt=""
        /></p>
    </div>
    <div>
        <h1>￥2330.00</h1>
        <h4>今日课程订单收入</h4>
        <p><img
          src="../../../assets/img/main/4/main-beijing-2330-jianbiankuai2.png"
          alt=""
        /></p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang='less' scoped>
.Day {
  height: 150px;
  display: flex;
  justify-content: space-between;
  color: white;
}
.Day > div {
  width: 277px;
  height: 144px;
  background-color: yellow;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: space-around;
  padding: 21px 11px;
  box-sizing: border-box;
  background-size: 100% 100%;
  h1{
      font-size: 30px;
      float: left;
  }
}
.Day div:nth-of-type(1) {
  background-image: url("../../../assets/img/main/1/one.png");
  
  
}
.Day div:nth-of-type(2) {
  // margin-left: 20px;
  background-image: url("../../../assets/img/main/2/two.png");
}
.Day div:nth-of-type(3) {
  // margin-left: 20px;
  background-image: url("../../../assets/img/main/3/three.png");
}
.Day div:nth-of-type(4) {
    // margin-left: 20px;
  background-image: url("../../../assets/img/main/4/four.png");
}
</style>